<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
</head>
<body>
<div id="app">
    <div class="btn_group">
        <button @click="add">添加</button>
    </div>
    <div>
        用户名 - 密码 - 角色名称
    </div>
    <div v-for="(user,index) in users">
        {{user.username}}-{{user.password}} ---{{user.role_name}}
        <button @click="edit(user,index)">修改</button>

    </div>
    <div v-show="info.isShow">
        <h1>添加用户</h1>
        <div>用户名:<input type="text" v-model="info.user.username"></div>
        <div>密码:<input type="text" v-model="info.user.password"></div>
        <div>
            角色：<select v-model="info.user.selectedRole">
            <option v-for="role in roles" :value="role.role_id">{{role.role_name}}</option>
        </select>
        </div>
        <div>
            <button @click="submit">确定</button>
        </div>
    </div>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script src="../../lib/jquery.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            users:[],
            roles:[],
            info:{
                isShow:false,
                user:{
                    username:'',
                    password:'',
                    index:-1,
                    selectedRole:1
                },

            }
        },
        mounted(){
            this.initTable();
            this.initSelect();
        },methods:{
            edit(user,index){
                this.info.user = user;
                this.info.user.index = index;
                this.info.isShow = true;
            },
            initSelect(){
                const _this = this;
                $.ajax({
                    url:'http://localhost:3000/role/list',
                    method:'get',
                    dataType:'json',
                    success:function (data) {
                        _this.roles = data;
                    }
                })
            },
            initTable(){
                const _this = this;
                $.ajax({
                    url:'http://localhost:3000/user/list',
                    method:'get',
                    dataType:'json',
                    success:function (data) {
                        _this.users = data;
                    }
                })
            },
            add(){
                /**
                 * 创建一个div用于保存新的用户信息
                 * 点击按钮完成添加
                 */
                this.info.isShow = true;
            },
            submit(){
                alert(this.info.user.index);
                const _this = this;
                $.ajax({
                    url:'http://localhost:3000/user/save',
                    method: 'post',
                    dataType: 'json',
                    data: this.info.user,
                    success:function (data){
                        if (data.flag){
                            _this.info.isShow = false;
                            _this.initTable();
                        }
                    }
                })
                /**
                 * 数据添加成功后，页面不会重新渲染
                 * 方案1：重新发起和mounted时一样的请求获取数据
                 * 方案2：在返回添加成功标识的同时，返回新数据，绑定users上
                 */
                // this.users.push(this.info.user);
            }
        }
    })
</script>
</html>
